import { useState, useEffect } from 'react'
import { FaCat, FaHeart, FaBook, FaStar, FaCoffee, FaGamepad, FaBed,FaBolt } from 'react-icons/fa'
export default function PetStatus({ happiness, energy, level, exp }) {
  return (
    <div className="space-y-2">
      <StatusBar icon={<FaHeart className="text-red-500" />} value={happiness} color="bg-red-500" />
      <div className="flex items-center gap-2">
        <FaStar className="text-yellow-500" />
        <span className="text-sm">Level {level}</span>
      </div>
      <StatusBar 
        icon={<FaBook className="text-blue-500" />} 
        value={(exp % (level * 100)) / (level * 100) * 100} 
        color="bg-blue-500" 
      />
      <StatusBar icon={<FaBolt className="text-yellow-500" />} value={energy} color="bg-yellow-500" />
    </div>
  )
}

function StatusBar({ icon, value, color }) {
  return (
    <div className="flex items-center gap-2">
      {icon}
      <div className="w-full bg-gray-200 rounded-full h-2">
        <div className={`${color} rounded-full h-2 transition-all`} style={{ width: `${value}%` }} />
      </div>
    </div>
  )
}